/**
 * @description 修改手机号
 */

import style from './styles/ChangeMobile.less';
import classnames from "classnames";
import React from 'react';
import EntryBase from "../Common/EntryBase";
const Fragment = React.Fragment;
import { Button, Picker, Icon, InputItem, List, Toast } from 'wd-mobile';
import TimmerBtn from "components/TimmerBtn";

import { sendMobileCode, checkMobileCode } from "api_xukaiyu/app/user";

import util from "commons/util";

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            formData: {
                mobile: "",
                code: "",
                appType: "H5"
            }
        }
    }
    componentDidMount() {
    }
    render() {
        return (
            <Fragment>
                <div className={classnames(style.main)}>
                    <div className={style.title}>修改手机号</div>
                    <div className={style.form}>
                        <div className={style.input}>
                            <div className={style.inputLeft}>
                                <span>手机号</span>
                                <input type="tel" placeholder="请输入新的手机号" onChange={(e) => {
                                    this.inputOnChange("mobile", e.target.value)
                                }} onBlur={this.inputOnBlurFix} />
                            </div>
                        </div>
                        <div className={style.input}>
                            <div className={classnames(style.inputCheckCode, style.inputLeft)}>
                                <span>验证码</span>
                                <input type="tel" placeholder="请输入验证码" maxLength={6} onChange={(e) => {
                                    this.inputOnChange("code", e.target.value)
                                }} onBlur={this.inputOnBlurFix} />
                            </div>
                            <div>
                                <TimmerBtn className={style.sendBtn} disabled={!util.isMobile(this.state.formData.mobile)} disabledClick={() => {
                                    if (!this.state.formData.mobile) {
                                        Toast.info("请先输入手机号");
                                        return;
                                    }
                                    if (!util.isMobile(this.state.formData.mobile)) {
                                        Toast.info("请输入正确的手机号")
                                    }
                                    return false;
                                }} validClick={(callback) => {
                                    this.getMobileCode(callback || function () { });
                                }} />
                            </div>
                        </div>
                    </div>
                    <div className={style.changeBtnContainer}>
                        <Button className={style.changeBtn} onClick={() => {
                            this.changeNewMobile()
                        }}>确认修改</Button>
                    </div>
                </div>
            </Fragment >
        )
    }

    // 微信中键盘退出页面无法回位问题修复
    inputOnBlurFix() {
        setTimeout(function () {
            var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
            window.scrollTo(0, Math.max(scrollHeight - 1, 0));
        }, 100);
    }

    // 输入监听
    inputOnChange(type, value) {
        const formData = { ...this.state.formData };
        formData[type] = value || "";
        this.setState({
            formData: formData
        })
    }

    // 获取手机验证码
    getMobileCode(callback) {
        sendMobileCode({
            mobile: this.state.formData.mobile,
            token: localStorage.getItem('wechatToken')
        }).then(() => {
            callback && callback();
        })
        // wdGeeTest.verify((challenge, response) => {
        //     sendMobileCode({
        //         mobile: this.state.formData.mobile,
        //         challenge: challenge
        //     })
        //     callback && callback()
        // }, this.state.formData.mobile, true, (error) => {
        //     // 极验初始化失败
        //     if (error.code == 1) {
        //         Toast.info("极验初始化失败，请刷新页面重试");
        //     } else {
        //         Toast.info("极验错误，请刷新页面重试");
        //     }
        // });
    }

    // 修改新手机号
    async changeNewMobile() {
        console.log(this.state.formData)
        // 验证数据
        if (!this.state.formData.mobile) {
            Toast.info("请输入手机号");
            return;
        }
        if (!util.isMobile(this.state.formData.mobile)) {
            Toast.info("请输入正确的手机号");
            return;
        }
        if (!this.state.formData.code) {
            Toast.info("请输入验证码");
            return;
        }

        // 修改请求
        try {
            await checkMobileCode(this.state.formData);
            Toast.info("修改成功", 1500, () => {
                history.back();
            });
        } catch (err) {

        }

        return false;
    }
}

export default App;